<!DOCTYPE html>
<head>
  <script type="module" src="gui.js"></script>
  <script src="https://beamanalytics.b-cdn.net/beam.min.js" data-token="afb68bbc-1c6c-439b-ad0c-6b5bbc665435" async></script>
  <link rel="stylesheet" href="../node_modules/bulma/bulma.sass">
  <title>Ruckig Visualization</title>
</head>
<body>
  <div x-data="dropdown" x-init="updatePlot()" class="container pt-4" style="min-height: calc(100vh - 101px);">
    <h1 class="title is-size-3">Ruckig</h1>
    <h2 class="subtitle is-5">Web Visualization</h2>

    <div class="columns">
      <div class="column">
        <div class="box has-background-info-light">
          <h5 class="title is-6">Current State</h5>

          <div class="columns">
            <label class="column p-1" for="current_position">current_position</label>
            <div class="column p-1">
              <input class="input is-small" type="number" step="0.01" x-model="current_position" x-on:change="updatePlot()">
            </div>
          </div>
          <div class="columns">
            <label class="column p-1" for="current_velocity">current_velocity</label>
            <div class="column p-1">
              <input class="input is-small" type="number" step="0.01" x-model="current_velocity" x-on:change="updatePlot()">
            </div>
          </div>
          <div class="columns">
            <label class="column p-1" for="current_acceleration">current_acceleration</label>
            <div class="column p-1">
              <input class="input is-small" type="number" step="0.01" name="current_acceleration" x-model="current_acceleration" x-on:change="updatePlot()">
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="box has-background-success-light">
          <h5 class="title is-6">Target State</h5>

          <div class="columns">
            <label class="column p-1" for="target_position">target_position</label>
            <div class="column p-1">
              <input class="input is-small" type="number" step="0.01" x-model="target_position" x-on:change="updatePlot()">
            </div>
          </div>
          <div class="columns">
            <label class="column p-1" for="target_velocity">target_velocity</label>
            <div class="column p-1">
              <input class="input is-small" type="number" step="0.01" x-model="target_velocity" x-on:change="updatePlot()">
            </div>
          </div>
          <div class="columns">
            <label class="column p-1" for="target_acceleration">target_acceleration</label>
            <div class="column p-1">
              <input class="input is-small" type="number" step="0.01" x-model="target_acceleration" x-on:change="updatePlot()">
            </div>
          </div>
        </div>
      </div>
      <div class="column">
        <div class="box has-background-warning-light">
          <h5 class="title is-6">Limits</h5>

          <div class="columns">
            <label class="column p-1" for="max_velocity">max_velocity</label>
            <div class="column p-1">
              <input class="input is-small" type="number" step="0.01" min="0.0" x-model="max_velocity" x-on:change="updatePlot()">
            </div>
          </div>
          <div class="columns">
            <label class="column p-1" for="max_acceleration">max_acceleration</label>
            <div class="column p-1">
              <input class="input is-small" type="number" step="0.01" min="0.0" x-model="max_acceleration" x-on:change="updatePlot()">
            </div>
          </div>
          <div class="columns">
            <label class="column p-1" for="max_jerk">max_jerk</label>
            <div class="column p-1">
              <input class="input is-small" type="number" step="0.01" min="0.0" x-model="max_jerk" x-on:change="updatePlot()">
            </div>
          </div>
        </div>
      </div>
    </div>

    <template x-if="hasError">
      <div class="notification is-danger is-light">
        <strong>Error</strong><br>
        <span x-text="errorMessage"></span>
      </div>
    </template>

    <div class="my-4" id="plot"></div>
  </div>

  <footer class="section py-5 has-background-light has-text-dark">
    <div class="container is-max-desktop">
      <nav class="level">
        <div class="level-left">
          <div>
            <h5 class="title title-custom is-size-6 has-text-dark">Ruckig</h5>
            <p class="subtitle title-custom is-size-7 has-text-dark">© 2024 Griffig Robotics GmbH</p>
          </div>
        </div>
      </nav>
    </div>
  </footer>
</body>
</html>
